import React from "react";
import { Card, Table, Button, Modal, Image } from "antd";
import { useState, useEffect } from "react";
import { loadOrder } from "../services/order";
import { resetImg } from "../utils/tool";
import { loadOrderDetail } from "../services/order";
function Order() {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(1);
  const [odetail, setOdetail] = useState([]);
  // const [isModalVisible, setIsModalVisible] = useState(false);
  const columns = [
    {
      title: "序号",
      align: "center",
      render(d, r, index) {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: "用户",
      align: "center",
      render(d) {
        return <>{d.user.userName}</>;
      },
    },
    {
      title: "价格",
      dataIndex: "price",
      align: "center",
    },
    {
      title: "地址",
      align: "center",
      render(d) {
        return <>{d.user.address}</>;
      },
    },
    {
      title: "详细地址",
      align: "center",
      render() {
        return <span>郑州市高新区</span>;
      },
    },
    {
      title: "订单状态",
      align: "center",
      render(d) {
        return <>{d.orderStatus ? "已完成" : "未完成"}</>;
      },
    },
    {
      title: "支付状态",
      align: "center",
      render(d) {
        return <>{d.payStatus ? "已支付" : "未支付"}</>;
      },
    },
    {
      title: "操作",
      width: 250,
      align: "center",
      render(d) {
        return (
          <>
            <Button
              type="primary"
              size="small"
              style={{ marginRight: 5 }}
              onClick={() => {
                success();
                loadOd(d.id);
              }}
            >
              详情
            </Button>
            <Button type="primary" danger size="small">
              删除
            </Button>
            <Button
              size="small"
              style={{ margin: "0 5px" }}
              onClick={() => {
                d.orderStatus = 1;
              }}
            >
              完成
            </Button>
            <Button size="small">支付</Button>
          </>
        );
      },
    },
  ];
  const orderColumn = [
    {
      title: "序号",
      align: "center",
      render(d, r, index) {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: "名字",
      align: "center",
      render(d, r, index) {
        return <span>{d.product.name}</span>;
      },
    },
    {
      title: "价格",
      align: "center",
      dataIndex: "price",
    },
    {
      title: "图片",
      align: "center",
      render(d) {
        return (
          <Image
            src={d.product.coverImage}
            alt={d.name}
            style={{ width: 80 }}
          />
        );
      },
    },
    {
      title: "数量",
      align: "center",
      dataIndex: "amount",
    },
  ];
  function success() {
    Modal.success({
      width: 800,
      title: "订单详情",
      content: (
        <Table rowKey="id" columns={orderColumn} dataSource={odetail}></Table>
      ),
      onOk() {},
    });
  }
  const loadR = async () => {
    const res = await loadOrder(page);
    console.log(res.data);
    setList(res.data);
    setTotal(res.total);
  };
  const loadOd = async (id) => {
    const res = await loadOrderDetail({ order: id });
    console.log(res);
    setOdetail(res);
  };
  useEffect(() => {
    loadR();
  }, [page]);
  return (
    <Card title={<h3>订单管理</h3>}>
      <Table
        columns={columns}
        rowKey="id"
        dataSource={list}
        pagination={{
          total: total,
          onChange: (page) => {
            setPage(page);
          },
        }}
      ></Table>
      {/* <Modal
        title="订单信息"
        visible={isModalVisible}
        cancelText="关闭"
        keyboard
        onCancel={() => setIsModalVisible(false)}
      ></Modal> */}
    </Card>
  );
}

export default Order;
